<template>
  <el-col :span="4" class="right-container" :style="themeOpacity">
    <!-- <el-link @click="gotoTask()" :underline="false"> -->
      <div class="right-content">
        <div class="task-title theme-less-font-color" @click="gotoTask()" style="cursor: pointer;">任务(0)</div>
        <div class="task-item" @click="gotoTask()" style="cursor: pointer;">
          <span class="task-text">待办任务</span>
          <span class="task-num">0</span>
        </div>
        <div class="task-item" @click="gotoTask()" style="cursor: pointer;">
          <span class="task-text">我发起的</span>
          <span class="task-num">0</span>
        </div>
        <div class="task-item" @click="gotoTask()" style="cursor: pointer;">
          <span class="task-text">周期服务</span>
          <span class="task-num">0</span>
        </div>
      </div>
    <!-- </el-link>c -->
  </el-col>
</template>

<script>
  export default {
    name: 'TaskPanel',
    props: {
      dragOptions: {
        type: Object,
        default: () => {}
      },
      themeOpacity: {
        type: Object,
        default: () => {}
      }
    },
    methods: {
      gotoTask() {
        window.open('javascript:window.name;', '<script>document.write("限学校内网访问!");location.replace("http://172.31.13.67:8099/sys/notify/index.jsp?dataType=todo")<\/script>');
      }
    }
  }
</script>

<style lang="scss" scoped>
  .right-container {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, 0.3);
  }
  .right-content {
    .task-title {
      line-height: 40px;
      height: 40px;
      box-sizing: border-box;
      padding: 0 30px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
      color: #4977fc;
      font-size: 16px;
    }

    .task-item {
      line-height: 40px;
      height: 40px;
      box-sizing: border-box;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
    }
  }
</style>
